<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>留言板</title>
	<link rel="stylesheet" th:href="@{/asserts/css/column.css}">
	<link rel="stylesheet" th:href="@{/asserts/css/basic.css}">
	<!-- BootStrapCss -->
	<link rel="stylesheet" th:href="@{asserts/css/bootstrap.min.css}">
    <style type="text/css">
        .comment-wrapper .panel-body {
            max-height:1000px;
            overflow:auto;
        }
        .comment-wrapper .media-list .media img {
            width:64px;
            height:64px;
            border:2px solid #e5e7e8;
        }
        .comment-wrapper .media-list .media {
            border-bottom:1px dashed #efefef;
            margin-bottom:25px;
        }
    </style>
</head>
<body>
<!--网页通用导航栏-->
<header th:insert="~{commons::header(active='comments')}"></header>
<div id="headline">
    <div class="headline">
    <hgroup>
        <h2>留言板</h2>
        <p>留下您的建议！</p>
        </hgroup>
    </div>
</div>
<div id="container">
<article class="list about">
<section class="comment-wrapper">
    <h2>评论区</h2>
        <div class="row bootstrap snippets bootdeys">
            <div class="col-sm-12">
                <div class="comment-wrapper">
                    <div class="panel panel-info">
                        <div class="panel-body">
                            <form th:action="@{/addComment}" method="post" >
                                <textarea name="comment" class="form-control" placeholder="留下你的建议..." rows="4" required></textarea>
                                <br>
                                <button type="submit" class="btn btn-info float-right" th:if="${session.touristAccount} != null">发表</button>
                                <button type="button" class="btn btn-info float-right disabled" th:if="${session.touristAccount} == null">请先登录</button>
                                <div class="clearfix"></div>
                            </form>
                            <hr>
                            <!--评论-->
                            <ul class="media-list">
                                <li class="media">
                                    <div class="media-body" style="margin-left: 1rem">
                                        <strong class="text-success">@Aquarius</strong>
                                        <p style="margin: 5px 0 0 0;text-indent:0">
                                           我很喜欢这个网站,提供了很多我想知道的旅游信息。
                                        </p>
                                        <span class="text-muted float-right">
                                             <small class="text-muted">2021-07-31 21:01:21</small>
                                        </span>
                                    </div>
                                </li>


                                <li class="media" th:each="comment,index:${comments}">
                                    <div class="media-body" style="margin-left: 1rem">
                                        <strong class="text-success" th:text="'@'+${comment.get('account_username')}">@MartinoMont</strong>
                                        <pre style="margin: 5px 0 0 0;text-indent:0" th:text="${comment.get('comment_text')}">
                                            我真的很喜欢这个网站
                                            Lorem ipsum dolor sit amet,
                                        </pre>
                                        <span class="text-muted float-right">
                                             <small class="text-muted" th:text="${#dates.format(comment.get('create_time'),'yyyy-MM-dd HH:mm:ss')}">三十分钟前</small>
                                        </span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>
</section>
</article>
    <!--侧边景点推荐栏-->
    <aside th:insert="commons::sidebar"></aside>
</div>

<!--网页通用footer-->
<div th:insert="~{commons::footer}"></div>

</body>
</html>